<template>
  <div class="t-notice-box">
    <transition-group tag="div" name="slide-fade">
      <notice v-for="notice in notices" :key="notice.key" :content="notice.content" :duration="notice.duration" :closable="notice.closable" :on-close="notice.onClose" :type="notice.type"></notice>
    </transition-group>
  </div>
</template>

<script>
  import Notice from './notice';

  export default {
    name: 't-notice-box',
    components: {
      Notice,
    },
    data() {
      return {
        seed: 0,
        notices: [],
      };
    },
    methods: {
      getUuid() {
        this.seed += 1;
        return `tNoticeBox_${this.seed}`;
      },
      add(notice) {
        notice.key = notice.key || this.getUuid();
        if (!this.notices.filter(
            (proxyNotice) => {
              return notice.key === proxyNotice.key;
            }).length) {
          const proxyNotice = Object.assign({
            duration: 4.5,
            closable: true,
          }, notice);
          proxyNotice.onClose = () => {
            this.remove(proxyNotice.key);
          };
          this.notices.push(proxyNotice);
        }
      },
      remove(key) {
        this.notices = this.notices.filter((proxyNotice) => {
          return proxyNotice.key !== key;
        });
      },
    },
  };
</script>
<style scoped="scoped">
  .slide-fade-enter-active {
    transition: all .5s ease;
  }
  
  .slide-fade-leave-active {
    transition: all .5s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter
  {
    transform: translateX(12px);
    opacity: 0;
  }
  .slide-fade-leave-to {
    transform: translateY(0px);
    opacity: 0;    
  }
</style>